<template>
  <el-dialog append-to-body :title="title + '设备'" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'480px'">
    <el-form :label-width="'120px'" size="small" :model="myForm" @submit.native.prevent>
      <el-form-item label="设备名称" required>
        <el-input size="small" v-model.trim="myForm.name" placeholder="请输入设备名称" maxlength="30" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="设备编号" required>
        <el-input size="small" v-model.trim="myForm.code" placeholder="请输入设备编号" maxlength="30" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch v-model="myForm.status"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :disabled="submitLoading" @click="cancel()">取消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="validForm()">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Setting from '@/settings'
import { AddMerchantDevice, UpdateMerchantDevice } from '@/views/merchant-management/services'
export default {
  props: ['visible', 'data'],
  data() {
    return {
      myForm: {
        name: '',
        code: '',
        mchId: this.$store.state.user.userRole == 0 ? '' : JSON.parse(this.$store.getters.userInfo).mchId, //商户id
        storeId: '',
        status: true, // 启用状态：0启用，1禁用
      },
      submitLoading: false,
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return;
        if (!this.data) return;
        this.setData();
      }
    }
  },
  computed: {
    title() {
      return this.data && this.data.id ? '编辑' : '新增'
    },
  },
  methods: {
    reset() {
      this.myForm.name = ''
      this.myForm.code = ''
      this.myForm.mchId = this.$store.state.user.userRole == 0 ? '' : JSON.parse(this.$store.getters.userInfo).mchId
      this.myForm.storeId = ''
      this.myForm.status = true
    },
    cancel() {
      this.closeModel()
    },
    closeModel() {
      this.$emit('update:visible', false)
      this.reset()
    },
    validForm() {
      if (!this.myForm.name) {
        this.$message.warning('请输入设备名称!')
        return
      }
      if (!this.myForm.code) {
        this.$message.warning('请输入设备编号!')
        return
      }
      if (!Setting.expression[0].value.test(this.myForm.code)) {
        this.$message.warning('设备编号只能输入字母和数字!')
        return
      }
      this.submitLoading = true
      const queryData = {
        equipmentNo: this.myForm.code,
        equipmentName: this.myForm.name,
        status: 0,
        enableStatus: this.myForm.status ? 0 : 1,
        activationTime: this.data && this.data.id ? this.data.activationTime : moment().format('YYYY-MM-DD HH:mm:ss'),
        creatorId: this.data && this.data.id ? this.data.creatorId : JSON.parse(this.$store.state.user.userInfo).id,
      }
      if (this.data && this.data.id) {
        UpdateMerchantDevice({
          ...queryData,
          id: this.data && this.data.id,
        })
          .finally(() => (this.submitLoading = false))
          .then(success => {
            if (success.code == 200) {
              this.$message.success(`${this.title}成功!`)
              this.closeModel()
              this.$emit('update', this.name)
            } else {
              this.$message.error(`${this.title}失败!`)
            }
          })
        return
      }
      AddMerchantDevice(queryData)
        .finally(() => (this.submitLoading = false))
        .then(success => {
          if (success.code == 200) {
            this.$message.success(`${this.title}成功!`)
            this.closeModel()
            this.$emit('update', this.name)
          } else {
            this.$message.error(`${this.title}失败!`)
          }
        })
    },
    setData() {
      this.myForm.name = this.data.equipmentName
      this.myForm.code = this.data.equipmentNo
      this.myForm.mchId = this.data.mchId
      this.myForm.storeId = this.data.storeId
      this.myForm.status = this.data.enableStatus == 0
    }
  },
}
</script>
